import "./App.css";
import { Route, Routes } from "react-router-dom";
import Analyze from "./pages/Analyze/Analyze";
import Index from "./pages/Index/Index";
import Add from "./pages/Add/Add";
import AddSlot from "./pages/AddSlot/AddSlot";
import Savings from "./pages/Savings/Savings";
import Date from "./pages/Date/Date";
import MyFooter from "./components/MyFooter/MyFooter";
import ThemeContext from "./store/themeContext";
import { useCallback, useState } from "react";
import ThemeMask from "./components/ThemeMask/ThemeMask";
document.documentElement.style.fontSize = 100 / 375 + "vw";
function App() {
    const [theme, setTheme] = useState("light");
    const [show, setShow] = useState(true);
    const changeTheme = useCallback(
        (val) => {
            setTheme(val);
        },
        [setTheme]
    );
    const changeShow = useCallback(
        (val) => {
            setShow(val);
        },
        [setShow]
    );
    return (
        <ThemeContext.Provider value={{ theme, changeTheme, changeShow }}>
            <div className="App" style={{ fontSize: "16rem" }}>
                <Routes>
                    <Route path="/" element={<Index />} />
                    <Route path="/analyze" element={<Analyze />} />
                    <Route path="/date" element={<Date />} />
                    <Route path="/add" element={<Add />} />
                    <Route path="/addSlot" element={<AddSlot />} />
                    <Route path="/savings" element={<Savings />} />
                </Routes>
                {show && <MyFooter />}
            </div>
            <ThemeMask />
        </ThemeContext.Provider>
    );
}

export default App;
